<template>
	<view class="content">
		<view class="mask" v-if="flag"></view>
		<view class="mask" v-if="flag1"></view>
		<view>
			<zzx-tabs :items="items" :current="current" @clickItem="onClickItem">
			</zzx-tabs>
		</view>
		<view>
			<view class="ori_content" v-show="current == 0">
				<view v-if="list.length>0" v-for="(item,index) in list" :key="index"
					@click="godingdanxq(item.orderNumber)">
					<p class="ori_dingdan">订单编号：{{item.orderNumber}}<text class="dingdanzhuangtai">{{
						item.status == 1
                    ? "待付款 "
                    : item.status == 2
                    ? "待发货"
                    : item.status == 3
                    ? "待收货"
                    : item.status == 5
                    ? "已完成"
                    : "已取消"
                }}</text></p>
					<view v-if="flag" class="model">
						<p>是否要取消此订单</p>
						<p>
							<span class="ori_fou" @click="NisFlag(false)">否</span>
							<span class="ori_fou" @click="canleshop(item.orderNumber)">是</span>
						</p>
					</view>
					<view v-if="flag1" class="model">
						<p>是否要删除此订单</p>
						<p>
							<span class="ori_fou" @click="NisFlag1(false)">否</span>
							<span class="ori_fou" @click="deldingdan(item.orderNumber)">是</span>
						</p>
					</view>
					<dl v-for="(items,inx) in item.orderItemDtos" :key="inx" class="ori_hang">
						<dt><img :src="items.pic" alt="" class="ori_img"></dt>
						<dd class="ori_text">{{items.prodName}}
							<p class="ori_sku">
								{{items.skuName}}
							</p>
							<p class="ori_price">
								￥{{items.price}}
							</p>
						</dd>
						<p class="ori_gongji">共计{{item.orderItemDtos.length}}件商品 合计￥{{item.actualTotal}}</p>

						<view class="ori_button" v-if="item.status==1">
							<span class="button1" @click="ondel()">
								取消订单
							</span>
							<span class="button">
								再次购买
							</span>
							<span class="button" @click="pay(item.orderNumber)">
								付 款
							</span>
						</view>
						<view class="ori_button" v-else>
							<span class="button11" @click="dels1()">
								删除
							</span>
						</view>
					</dl>
				</view>
				<view v-else class="ori_null">
					还没有任何相关订单
				</view>
			</view>
			<view class="ori_content" v-show="current == 1">
				<view v-if="list.length>0" v-for="(item,index) in list" :key="index"
					@click="godingdanxq(item.orderNumber)">
					<p class="ori_dingdan">订单编号：{{item.orderNumber}}</p>
					<dl v-for="(items,inx) in item.orderItemDtos" :key="inx" class="ori_hang">
						<dt><img :src="items.pic" alt="" class="ori_img"></dt>
						<dd class="ori_text">{{items.prodName}}
							<p class="ori_sku">
								{{items.skuName}}
							</p>
							<p class="ori_price">
								￥{{items.price}}
							</p>
						</dd>
						<p class="ori_gongji">共计{{list.length}}件商品 合计￥{{item.actualTotal}}</p>
						<view class="ori_button" v-if="item.status==1">
							<span class="button1" @click="ondel()">
								取消订单
							</span>
							<span class="button">
								再次购买
							</span>
							<span class="button" @click="pay(item.orderNumber)">
								付 款
							</span>
						</view>
						<view v-if="flag" if="" class="model">
							<p>是否要取消此订单</p>
							<p>
								<span class="ori_fou" @click="NisFlag(false)">否</span>
								<span class="ori_fou" @click="canleshop(item.orderNumber)">是</span>
							</p>
						</view>
					</dl>
				</view>
				<view v-else class="ori_null">
					还没有任何相关订单
				</view>

			</view>
			<view class="ori_content" v-show="current == 2">
				<view v-if="list.length>0" v-for="(item,index) in list" :key="index">
					<p class="ori_dingdan">订单编号：{{item.orderNumber}}</p>
					<dl v-for="(items,inx) in item.orderItemDtos" :key="inx" class="ori_hang">
						<dt><img :src="items.pic" alt="" class="ori_img"></dt>
						<dd class="ori_text">{{items.prodName}}
							<p class="ori_sku">
								{{items.skuName}}
							</p>
							<p class="ori_price">
								￥{{items.price}}
							</p>
						</dd>
						<p class="ori_gongji">共计{{list.length}}件商品 合计￥{{item.actualTotal}}</p>
					</dl>
				</view>
				<view v-else class="ori_null">
					还没有任何相关订单
				</view>
			</view>
			<view class="ori_content" v-show="current == 3">
				<view v-if="list.length>0" v-for="(item,index) in list" :key="index">
					<p class="ori_dingdan">订单编号：{{item.orderNumber}}</p>
					<dl v-for="(items,inx) in item.orderItemDtos" :key="inx" class="ori_hang">
						<dt><img :src="items.pic" alt="" class="ori_img"></dt>
						<dd class="ori_text">{{items.prodName}}
							<p class="ori_sku">
								{{items.skuName}}
							</p>
							<p class="ori_price">
								￥{{items.price}}
							</p>
						</dd>
						<p class="ori_gongji">共计{{list.length}}件商品 合计￥{{item.actualTotal}}</p>
					</dl>
				</view>
				<view v-else class="ori_null">
					还没有任何相关订单
				</view>
			</view>
			<view class="ori_content" v-show="current == 4">
				<view v-if="list.length>0" v-for="(item,index) in list" :key="index">
					<p class="ori_dingdan">订单编号：{{item.orderNumber}}</p>
					<dl v-for="(items,inx) in item.orderItemDtos" :key="inx" class="ori_hang">
						<dt><img :src="items.pic" alt="" class="ori_img"></dt>
						<dd class="ori_text">{{items.prodName}}
							<p class="ori_sku">
								{{items.skuName}}
							</p>
							<p class="ori_price">
								￥{{items.price}}
							</p>
						</dd>
						<p class="ori_gongji">共计{{list.length}}件商品 合计￥{{item.actualTotal}}</p>
					</dl>
				</view>
				<view v-else class="ori_null">
					还没有任何相关订单
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import zzxTabs from "@/components/zzx-tabs/zzx-tabs.vue"
	import {
		request
	} from '../../../utils/request.js'
	export default {
		components: {
			zzxTabs
		},
		onLoad(option) {
			this.current = option.item
			this.getList(option.item)
		},

		data() {
			return {
				items: ['全部', '待支付', '待发货', "待收货", "已完成"],
				current: 0,
				list: [],
				flag: false,
				flag1: false
			};
		},
		methods: {
			godingdanxq(item) {
				uni.navigateTo({
					url: `/pages/order_details/order_details?item=${item}`
				})
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
				}
				this.getList(e.currentIndex)

			},
			getList(num) {
				request({
					url: `/p/myOrder/myOrder?status=${num}`,
					method: "GET",
				}).then(res => {
					this.list = res.records
					console.log(res.records);
				})
			},
			ondel() {
				this.flag = true
			},
			NisFlag(boo) {
				this.flag = boo
			},
			canleshop(id) {
				this.NisFlag(false)
				request({
					url: `/p/myOrder/cancel/${id}`,
					method: "PUT"
				}).then(res => {
					console.log(res);
					request({
						url: `/p/myOrder/myOrder?status=${this.current}`,
						method: "GET",
					}).then(res => {
						this.list = res.records;
					})
				})

			},
			dels() {
				this.flag = true
			},
			dels1() {
				this.flag1 = true
			},
			NisFlag1() {
				this.flag1 = false
			},
			deldingdan(id) {
				request({
					url: `/p/myOrder/${id}`,
					method: "DELETE"
				}).then(res => {
					uni.showToast({
						icon: "info",
						title: res
					})
					request({
						url: `/p/myOrder/myOrder?status=${this.current}`,
						method: "GET",
					}).then(res => {
						this.list = res.records;
					})
				})
				this.flag1 = false
			},
			pay(id) {
				request({
					url: "/p/order/pay",
					method: 'POST',
					data: {
						payType: 1,
						orderNumbers: id
					}
				}).then(res => {
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.timeStamp,
						nonceStr: res.nonceStr,
						package: res.packageValue,
						signType: res.signType,
						paySign: res.paySign,
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
							uni.navigateTo({
								url: "/pages/successful/successful"
							})
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
						}
					});
				})
			}
		},
	}
</script>
<style scoped>
	@import url("./oriders.css")
</style>
